
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">

    <style type="text/css">

        @font-face {font-family: "iconfont";
          src: url('iconfont.eot'); /* IE9*/
          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('iconfont.woff') format('woff'), /* chrome, firefox */
          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont {
          font-family:"iconfont" !important;
          font-size:16px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe87b;</i>
                    <div class="name">stop</div>
                    <div class="code">&amp;#xe87b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66c;</i>
                    <div class="name">stop</div>
                    <div class="code">&amp;#xe66c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe658;</i>
                    <div class="name">在线</div>
                    <div class="code">&amp;#xe658;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61b;</i>
                    <div class="name">内容</div>
                    <div class="code">&amp;#xe61b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe621;</i>
                    <div class="name">标签</div>
                    <div class="code">&amp;#xe621;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe635;</i>
                    <div class="name">暂停</div>
                    <div class="code">&amp;#xe635;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6b4;</i>
                    <div class="name">行为分析</div>
                    <div class="code">&amp;#xe6b4;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe617;</i>
                    <div class="name">内容监测</div>
                    <div class="code">&amp;#xe617;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe662;</i>
                    <div class="name">分析</div>
                    <div class="code">&amp;#xe662;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe602;</i>
                    <div class="name">标签</div>
                    <div class="code">&amp;#xe602;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe618;</i>
                    <div class="name">play</div>
                    <div class="code">&amp;#xe618;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe629;</i>
                    <div class="name">活动</div>
                    <div class="code">&amp;#xe629;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe608;</i>
                    <div class="name">app</div>
                    <div class="code">&amp;#xe608;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe693;</i>
                    <div class="name">频道</div>
                    <div class="code">&amp;#xe693;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64f;</i>
                    <div class="name">频道</div>
                    <div class="code">&amp;#xe64f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe620;</i>
                    <div class="name">更多</div>
                    <div class="code">&amp;#xe620;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe624;</i>
                    <div class="name">右箭头</div>
                    <div class="code">&amp;#xe624;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe625;</i>
                    <div class="name">左箭头</div>
                    <div class="code">&amp;#xe625;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63c;</i>
                    <div class="name">上</div>
                    <div class="code">&amp;#xe63c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63d;</i>
                    <div class="name">下</div>
                    <div class="code">&amp;#xe63d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63e;</i>
                    <div class="name">左</div>
                    <div class="code">&amp;#xe63e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe642;</i>
                    <div class="name">系统状态</div>
                    <div class="code">&amp;#xe642;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe646;</i>
                    <div class="name">text</div>
                    <div class="code">&amp;#xe646;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe74a;</i>
                    <div class="name">活动</div>
                    <div class="code">&amp;#xe74a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe838;</i>
                    <div class="name">设备</div>
                    <div class="code">&amp;#xe838;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66d;</i>
                    <div class="name">频道播放</div>
                    <div class="code">&amp;#xe66d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe619;</i>
                    <div class="name">标签</div>
                    <div class="code">&amp;#xe619;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe600;</i>
                    <div class="name">分享</div>
                    <div class="code">&amp;#xe600;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe898;</i>
                    <div class="name">22资料、手册</div>
                    <div class="code">&amp;#xe898;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe89a;</i>
                    <div class="name">24组织架构、接口</div>
                    <div class="code">&amp;#xe89a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe8bc;</i>
                    <div class="name">208聊天、对话</div>
                    <div class="code">&amp;#xe8bc;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe8bd;</i>
                    <div class="name">208聊天、对话-线性</div>
                    <div class="code">&amp;#xe8bd;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe8c1;</i>
                    <div class="name">212喇叭</div>
                    <div class="code">&amp;#xe8c1;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe8c4;</i>
                    <div class="name">217时间-线性</div>
                    <div class="code">&amp;#xe8c4;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe73c;</i>
                    <div class="name">画像分析</div>
                    <div class="code">&amp;#xe73c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe601;</i>
                    <div class="name">设备</div>
                    <div class="code">&amp;#xe601;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60f;</i>
                    <div class="name">电台</div>
                    <div class="code">&amp;#xe60f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64e;</i>
                    <div class="name">电台</div>
                    <div class="code">&amp;#xe64e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe606;</i>
                    <div class="name">大电台</div>
                    <div class="code">&amp;#xe606;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe607;</i>
                    <div class="name">电台设置</div>
                    <div class="code">&amp;#xe607;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb65;</i>
                    <div class="name">警告</div>
                    <div class="code">&amp;#xeb65;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb68;</i>
                    <div class="name">账号权限管理</div>
                    <div class="code">&amp;#xeb68;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61f;</i>
                    <div class="name">音乐</div>
                    <div class="code">&amp;#xe61f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe616;</i>
                    <div class="name">标签</div>
                    <div class="code">&amp;#xe616;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe614;</i>
                    <div class="name">数据</div>
                    <div class="code">&amp;#xe614;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb6a;</i>
                    <div class="name">关闭</div>
                    <div class="code">&amp;#xeb6a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb88;</i>
                    <div class="name">icon_任务进程</div>
                    <div class="code">&amp;#xeb88;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb89;</i>
                    <div class="name">icon_疑问空心</div>
                    <div class="code">&amp;#xeb89;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb8a;</i>
                    <div class="name">icon_添加</div>
                    <div class="code">&amp;#xeb8a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb98;</i>
                    <div class="name">工业组件-开关</div>
                    <div class="code">&amp;#xeb98;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb96;</i>
                    <div class="name">图表-柱状图</div>
                    <div class="code">&amp;#xeb96;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb99;</i>
                    <div class="name">形状-图片</div>
                    <div class="code">&amp;#xeb99;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61a;</i>
                    <div class="name">生命线记录</div>
                    <div class="code">&amp;#xe61a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6fc;</i>
                    <div class="name">play</div>
                    <div class="code">&amp;#xe6fc;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe603;</i>
                    <div class="name">历史</div>
                    <div class="code">&amp;#xe603;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe77d;</i>
                    <div class="name">check-circle</div>
                    <div class="code">&amp;#xe77d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe77e;</i>
                    <div class="name">close-circle</div>
                    <div class="code">&amp;#xe77e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe77f;</i>
                    <div class="name">frown</div>
                    <div class="code">&amp;#xe77f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe780;</i>
                    <div class="name">left-circle</div>
                    <div class="code">&amp;#xe780;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe781;</i>
                    <div class="name">down-circle</div>
                    <div class="code">&amp;#xe781;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe782;</i>
                    <div class="name">minus-circle</div>
                    <div class="code">&amp;#xe782;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe783;</i>
                    <div class="name">plus-circle</div>
                    <div class="code">&amp;#xe783;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe784;</i>
                    <div class="name">play-circle</div>
                    <div class="code">&amp;#xe784;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe785;</i>
                    <div class="name">question-circle</div>
                    <div class="code">&amp;#xe785;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe786;</i>
                    <div class="name">right-circle</div>
                    <div class="code">&amp;#xe786;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe787;</i>
                    <div class="name">smile</div>
                    <div class="code">&amp;#xe787;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe788;</i>
                    <div class="name">time-circle</div>
                    <div class="code">&amp;#xe788;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe789;</i>
                    <div class="name">time out</div>
                    <div class="code">&amp;#xe789;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe78a;</i>
                    <div class="name">up-circle</div>
                    <div class="code">&amp;#xe78a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe78b;</i>
                    <div class="name">sync</div>
                    <div class="code">&amp;#xe78b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe78c;</i>
                    <div class="name">transaction</div>
                    <div class="code">&amp;#xe78c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe792;</i>
                    <div class="name">reload time</div>
                    <div class="code">&amp;#xe792;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe78d;</i>
                    <div class="name">message</div>
                    <div class="code">&amp;#xe78d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe793;</i>
                    <div class="name">dashboard</div>
                    <div class="code">&amp;#xe793;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe794;</i>
                    <div class="name">issues close</div>
                    <div class="code">&amp;#xe794;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe78e;</i>
                    <div class="name">poweroff</div>
                    <div class="code">&amp;#xe78e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe796;</i>
                    <div class="name">logout</div>
                    <div class="code">&amp;#xe796;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe797;</i>
                    <div class="name">login</div>
                    <div class="code">&amp;#xe797;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe78f;</i>
                    <div class="name">pie chart</div>
                    <div class="code">&amp;#xe78f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe799;</i>
                    <div class="name">setting</div>
                    <div class="code">&amp;#xe799;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe790;</i>
                    <div class="name">eye</div>
                    <div class="code">&amp;#xe790;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe791;</i>
                    <div class="name">location</div>
                    <div class="code">&amp;#xe791;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7ae;</i>
                    <div class="name">add user</div>
                    <div class="code">&amp;#xe7ae;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7af;</i>
                    <div class="name">addteam</div>
                    <div class="code">&amp;#xe7af;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7b0;</i>
                    <div class="name">user</div>
                    <div class="code">&amp;#xe7b0;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7b1;</i>
                    <div class="name">team</div>
                    <div class="code">&amp;#xe7b1;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7c8;</i>
                    <div class="name">like</div>
                    <div class="code">&amp;#xe7c8;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7c9;</i>
                    <div class="name">unlike</div>
                    <div class="code">&amp;#xe7c9;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7cd;</i>
                    <div class="name">medicinebox</div>
                    <div class="code">&amp;#xe7cd;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7d1;</i>
                    <div class="name">folder-open</div>
                    <div class="code">&amp;#xe7d1;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7d4;</i>
                    <div class="name">scan</div>
                    <div class="code">&amp;#xe7d4;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7d7;</i>
                    <div class="name">barcode</div>
                    <div class="code">&amp;#xe7d7;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7d8;</i>
                    <div class="name">camera</div>
                    <div class="code">&amp;#xe7d8;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7d9;</i>
                    <div class="name">cloud-upload</div>
                    <div class="code">&amp;#xe7d9;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7da;</i>
                    <div class="name">cloud-download</div>
                    <div class="code">&amp;#xe7da;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7df;</i>
                    <div class="name">fund</div>
                    <div class="code">&amp;#xe7df;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7de;</i>
                    <div class="name">image</div>
                    <div class="code">&amp;#xe7de;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7e2;</i>
                    <div class="name">star</div>
                    <div class="code">&amp;#xe7e2;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7e0;</i>
                    <div class="name">wifi</div>
                    <div class="code">&amp;#xe7e0;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7e4;</i>
                    <div class="name">attachment</div>
                    <div class="code">&amp;#xe7e4;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7e9;</i>
                    <div class="name">shrink</div>
                    <div class="code">&amp;#xe7e9;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7ea;</i>
                    <div class="name">arrawsalt</div>
                    <div class="code">&amp;#xe7ea;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7eb;</i>
                    <div class="name">vertical right</div>
                    <div class="code">&amp;#xe7eb;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7ec;</i>
                    <div class="name">vertical left</div>
                    <div class="code">&amp;#xe7ec;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7ed;</i>
                    <div class="name">right</div>
                    <div class="code">&amp;#xe7ed;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7ee;</i>
                    <div class="name">left</div>
                    <div class="code">&amp;#xe7ee;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7ef;</i>
                    <div class="name">up</div>
                    <div class="code">&amp;#xe7ef;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f0;</i>
                    <div class="name">down</div>
                    <div class="code">&amp;#xe7f0;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f1;</i>
                    <div class="name">fullscreen</div>
                    <div class="code">&amp;#xe7f1;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f2;</i>
                    <div class="name">fullscreen-exit</div>
                    <div class="code">&amp;#xe7f2;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f3;</i>
                    <div class="name">arrowright</div>
                    <div class="code">&amp;#xe7f3;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f4;</i>
                    <div class="name">arrowup</div>
                    <div class="code">&amp;#xe7f4;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f5;</i>
                    <div class="name">arrowleft</div>
                    <div class="code">&amp;#xe7f5;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f6;</i>
                    <div class="name">arrowdown</div>
                    <div class="code">&amp;#xe7f6;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f7;</i>
                    <div class="name">upload</div>
                    <div class="code">&amp;#xe7f7;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f8;</i>
                    <div class="name">stock</div>
                    <div class="code">&amp;#xe7f8;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f9;</i>
                    <div class="name">rise</div>
                    <div class="code">&amp;#xe7f9;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7fa;</i>
                    <div class="name">indent</div>
                    <div class="code">&amp;#xe7fa;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7fb;</i>
                    <div class="name">menu</div>
                    <div class="code">&amp;#xe7fb;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7fc;</i>
                    <div class="name">unordered list</div>
                    <div class="code">&amp;#xe7fc;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7fd;</i>
                    <div class="name">ordered list</div>
                    <div class="code">&amp;#xe7fd;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7fe;</i>
                    <div class="name">align-right</div>
                    <div class="code">&amp;#xe7fe;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7ff;</i>
                    <div class="name">align-center</div>
                    <div class="code">&amp;#xe7ff;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe800;</i>
                    <div class="name">bg-colors</div>
                    <div class="code">&amp;#xe800;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe654;</i>
                    <div class="name">历史</div>
                    <div class="code">&amp;#xe654;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe751;</i>
                    <div class="name">实时</div>
                    <div class="code">&amp;#xe751;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe846;</i>
                    <div class="name">frown-fill</div>
                    <div class="code">&amp;#xe846;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe847;</i>
                    <div class="name">smile-fill</div>
                    <div class="code">&amp;#xe847;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe85b;</i>
                    <div class="name">diff-fill</div>
                    <div class="code">&amp;#xe85b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe85c;</i>
                    <div class="name">file-copy-fill</div>
                    <div class="code">&amp;#xe85c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe85d;</i>
                    <div class="name">snippets-fill</div>
                    <div class="code">&amp;#xe85d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe85e;</i>
                    <div class="name">batch folding-fill</div>
                    <div class="code">&amp;#xe85e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe85f;</i>
                    <div class="name">reconciliation-fill</div>
                    <div class="code">&amp;#xe85f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe860;</i>
                    <div class="name">folder-add-fill</div>
                    <div class="code">&amp;#xe860;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe861;</i>
                    <div class="name">folder-fill</div>
                    <div class="code">&amp;#xe861;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe862;</i>
                    <div class="name">folder-open-fill</div>
                    <div class="code">&amp;#xe862;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe864;</i>
                    <div class="name">database-fill</div>
                    <div class="code">&amp;#xe864;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe865;</i>
                    <div class="name">calendar-check-fill</div>
                    <div class="code">&amp;#xe865;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe866;</i>
                    <div class="name">image-fill</div>
                    <div class="code">&amp;#xe866;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe867;</i>
                    <div class="name">id card-fill</div>
                    <div class="code">&amp;#xe867;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe868;</i>
                    <div class="name">credit card-fill</div>
                    <div class="code">&amp;#xe868;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe869;</i>
                    <div class="name">fund-fill</div>
                    <div class="code">&amp;#xe869;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe86a;</i>
                    <div class="name">read-fill</div>
                    <div class="code">&amp;#xe86a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe86b;</i>
                    <div class="name">contacts-fill</div>
                    <div class="code">&amp;#xe86b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe863;</i>
                    <div class="name">money collect-fill</div>
                    <div class="code">&amp;#xe863;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe86c;</i>
                    <div class="name">sound-fill</div>
                    <div class="code">&amp;#xe86c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe86d;</i>
                    <div class="name">location-fill</div>
                    <div class="code">&amp;#xe86d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe86e;</i>
                    <div class="name">cloud-fill</div>
                    <div class="code">&amp;#xe86e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe86f;</i>
                    <div class="name">unlike-fill</div>
                    <div class="code">&amp;#xe86f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe870;</i>
                    <div class="name">star-fill</div>
                    <div class="code">&amp;#xe870;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe872;</i>
                    <div class="name">unlock-fill</div>
                    <div class="code">&amp;#xe872;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe873;</i>
                    <div class="name">thunderbolt-fill</div>
                    <div class="code">&amp;#xe873;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe874;</i>
                    <div class="name">tag-fill</div>
                    <div class="code">&amp;#xe874;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe875;</i>
                    <div class="name">wrench-fill</div>
                    <div class="code">&amp;#xe875;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe876;</i>
                    <div class="name">tags-fill</div>
                    <div class="code">&amp;#xe876;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe877;</i>
                    <div class="name">bank-fill</div>
                    <div class="code">&amp;#xe877;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe878;</i>
                    <div class="name">camera-fill</div>
                    <div class="code">&amp;#xe878;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe879;</i>
                    <div class="name">mail-fill</div>
                    <div class="code">&amp;#xe879;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe87a;</i>
                    <div class="name">car-fill</div>
                    <div class="code">&amp;#xe87a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe871;</i>
                    <div class="name">setting-fill</div>
                    <div class="code">&amp;#xe871;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe87e;</i>
                    <div class="name">apple</div>
                    <div class="code">&amp;#xe87e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe87f;</i>
                    <div class="name">android</div>
                    <div class="code">&amp;#xe87f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe881;</i>
                    <div class="name">android-fill</div>
                    <div class="code">&amp;#xe881;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe882;</i>
                    <div class="name">apple-fill</div>
                    <div class="code">&amp;#xe882;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe883;</i>
                    <div class="name">HTML5-fill</div>
                    <div class="code">&amp;#xe883;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe884;</i>
                    <div class="name">windows-fill</div>
                    <div class="code">&amp;#xe884;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe885;</i>
                    <div class="name">twitter</div>
                    <div class="code">&amp;#xe885;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe623;</i>
                    <div class="name">留存分析</div>
                    <div class="code">&amp;#xe623;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec5c;</i>
                    <div class="name">数据挖掘</div>
                    <div class="code">&amp;#xec5c;</div>
                </li>
            
        </ul>
        <h2 id="unicode-">unicode引用</h2>
        <hr>

        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
        <ul>
        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
        </ul>
        <blockquote>
        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
        </blockquote>
        <p>unicode使用步骤如下：</p>
        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
        <pre><code class="lang-js hljs javascript">@font-face {
  font-family: <span class="hljs-string">'iconfont'</span>;
  src: url(<span class="hljs-string">'iconfont.eot'</span>);
  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
}
</code></pre>
        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
        <pre><code class="lang-js hljs javascript">.iconfont{
  font-family:<span class="hljs-string">"iconfont"</span> !important;
  font-size:<span class="hljs-number">16</span>px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>

        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>


</body>
</html>
